<template>
  <div class="box">
    <div class="inside" @mouseover="mouse" @mouseout="this.automatic">
      <div class="tab" >
        <h4>销售额统计</h4>
        <span></span>
        <a href="javascript:" @click="isData(type = '0')" class="active">年</a>
        <a href="javascript:" @click="isData(type = '1')">季</a>
        <a href="javascript:" @click="isData(type = '2')">月</a>
        <a href="javascript:" @click="isData(type = '3')">周</a>
      </div>
      <div class="figure"></div>
    </div>
  </div>
</template>

<script>
import echarts from '@/util/echartsModule'
import adaptive from '@/util/adaptive.js'
export default {
  name: 'EchratLinear',

  data () {
    return {
      expectedSalesData: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], // 预计销售额
      revenueData: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79], // 实际销售额
      index: 0, // tab框位置
      time: null, // tab定时器
      data: {
        year: [
          [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
          [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
          [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
          [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
          [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
          [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
          [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
      }
    }
  },

  mounted () {
    this.initMap()
    this.automatic()
  },
  watch: {
    revenueData: {
      handler () {
        this.initMap()
      },
      deep: true
    }
  },
  methods: {
    initMap () {
      const chartDom = document.querySelector('.figure')
      const myChart = echarts.init(chartDom)
      const option = {
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // 设置位置
          right: '10%',
          // 如果对象设置了name这边能省略
          // data: ['Email', 'Union Ads'],
          // 设置文字颜色
          textStyle: {
            color: '#4c9bfd'
          }
        },
        grid: {
          // 显示整个图边框
          show: true,
          left: '3%',
          right: '4%',
          bottom: '0%',
          top: '40px',
          containLabel: true,
          borderWidth: 0.5, // 边框的大小
          borderColor: '#012f4a' // 边框颜色
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ],
          // x轴相关设置
          axisLine: {
            show: false // 隐藏x轴线
          },
          axisLabel: {
            // 底部文字颜色
            color: '#4c9bfd'
          },
          axisTick: {
            show: false
          }
        },
        // y轴
        yAxis: {
          type: 'value',
          // 分割线颜色
          splitLine: {
            lineStyle: {
              color: '#012f4a'
            }
          },
          // 文字颜色
          axisLabel: {
            color: '#4c9bfd'
          },
          // y轴线
          axisLine: {
            // 显示
            show: true,
            lineStyle: {
              color: '#333333' // y轴线颜色
            }
          }
        },
        series: [
          {
            name: '预期销售额',
            type: 'line',
            stack: 'Total',
            data: this.expectedSalesData,
            // 设置展示线圆滑
            smooth: true
          },
          {
            name: '实际销售额',
            type: 'line',
            stack: 'Total',
            data: this.revenueData,
            smooth: true
          }
        ]
      }

      option && myChart.setOption(option)
      adaptive(myChart)
    },
    // 点击 -> 切换数据
    isData (tape) {
      this.isTab(tape)
      this.index = tape
      if (tape === '0') {
        this.expectedSalesData = this.data.year[0]
        this.revenueData = this.data.year[1]
      } else if (tape === '1') {
        this.expectedSalesData = this.data.quarter[0]
        this.revenueData = this.data.quarter[1]
      } else if (tape === '2') {
        this.expectedSalesData = this.data.month[0]
        this.revenueData = this.data.month[1]
      } else {
        this.expectedSalesData = this.data.week[0]
        this.revenueData = this.data.week[1]
      }
    },
    // 自动切换框
    automatic () {
      const as = document.querySelectorAll('.tab>a')
      this.time = setInterval(() => {
        if (this.index >= as.length) this.index = 0
        as[this.index].click()
        this.isTab(this.index)
        this.index++
      }, 2000)
    },
    // 切换tab
    isTab (imdex) {
      const as = document.querySelectorAll('.tab>a')
      for (let i = 0; i < as.length; i++) {
        as[i].removeAttribute('class') // 删除当前class
      }
      as[imdex].className = 'active'
    },
    // 鼠标经过暂停定时器
    mouse () {
      clearInterval(this.time)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 180px;
  .tab {
    display: flex;
    line-height: 1;
    margin-bottom: 15px;
    h4 {
      padding-right: 20px;
    }
    a {
      width: 24px;
      height: 24px;
      margin: 0 15px;
      text-align: center;
      line-height: 24px;
      font-size: 16px;
      color: #05acc5;
      border-radius: 3px;
     &.active {
        color: #fff;
        background-color: #4c9bfd;
     }
    }
    span {
      height: 22px;
      width: 2px;
      background-color: #00f2f1;
    }
  }
  .figure {
    width: 100%;
    height: 85%;
  }
}
</style>
